<template>
  <van-popup
    v-model:show="show"
    :style="{
      width: '280px',
      height: '220px',
      borderRadius: '8px',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between'
    }"
  >
    <div class="opinion">
      <van-divider
        :style="{
          color: '#101010',
          borderColor: '#999999',
          fontSize: '17px',
          marginTop: '10px',
          marginBottom: '0'
        }"
        >审批原因</van-divider
      >
    </div>
    <div class="opinion-text">
      <van-field
        class="field-cell"
        v-model="remarks"
        rows="2"
        type="textarea"
        maxlength="50"
        placeholder="请输入审批原因"
        show-word-limit
        autosize
      />
    </div>
    <van-button class="end" type="default" block @click="submitApproverClick"
      >审批提交</van-button
    >
  </van-popup>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { postApprovalContract } from '@/api/contract'
import { Toast } from 'vant'
export default defineComponent({
  setup() {
    const router = useRouter()
    const route = useRoute()
    const show = ref(false)
    const remarks = ref('')
    const businessType = ref<number>(0)
    const ApprovalTypa = ref<number>(0)
    const showPopup = (obj: { type: number; businessType: number }) => {
      show.value = true
      ApprovalTypa.value = obj.type
      businessType.value = obj.businessType
    }
    // 审批提交
    const submitApproverClick = async () => {
      if (ApprovalTypa.value === 2) {
        if (!remarks.value.trim()) {
          return Toast('拒绝审批理由不能为空')
        }
      }
      const params = {
        processId: route.query.processId as string,
        contractId: route.query.contractId as string,
        businessType: businessType.value,
        approvalState: ApprovalTypa.value,
        remarks: remarks.value
      }
      const res = await postApprovalContract(params)
      if (res.code !== '0') return
      router.push('/home-page')
      
    }
    return {
      remarks,
      show,
      showPopup,
      submitApproverClick
    }
  }
})
</script>

<style scoped lang="less">
.opinion {
  padding: 0 60px;
}
.opinion-text {
  margin: 0 10px;
  border-radius: 4px;
  border: 1px solid #e4e4e4;
  :deep(.van-field__control) {
    font-size: 16px;
  }
}
.end {
  font-size: 16px;
  color: #101010;
}
</style>
